<script setup lang="ts">
import { CaretRightOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router'

// 引入路由
const router = useRouter()

const onLecturerDetails = () => {
  router.push('/lecturerdetails')
}
</script>

<template>
  <div class="search-details">
    <div class="search-details-left">
      <div class="search-details-left-image" @click="router.push('/course/1/video')">
        <a-button class="search-details-left-image-button">
          <CaretRightOutlined  />
          播放</a-button>
      </div>
      <div class="search-details-left-brief">
        <h3>使用人群</h3>
        <p>1. 学生：学习计算机相关专业的学生</p>
        <p>2. 职场人士：对计算机技术有兴趣，想提升职场竞争力的职场人士</p>
        <p>3. 企业：需要计算机技术支持的企业</p>
        <h3>课程描述</h3>
        <p>
          本课程主要介绍计算机基础知识、编程语言、算法、数据结构、操作系统、计算机网络、数据库、软件工程、计算机图形学、人工智能等相关知识。
          通过本课程的学习，可以帮助学生更好的理解计算机的工作原理、解决问题的方法，提升自我能力，培养计算机素养。
        </p>
        <p>
          本课程适合学习者的背景：有一定计算机基础，对计算机相关专业有浓厚兴趣，具备良好的学习能力。
          课程目标：培养学生的计算机基础知识、编程能力、数据结构、算法、操作系统、计算机网络、数据库、软件工程、计算机图形学、人工智能等相关知识。
        </p>
        <p>
          评分：<span>8.5</span> 喜欢：<span>100</span> 评论：<span>10</span>
        </p>
      </div>
    </div>
    <div class="search-details-right">
      <div class="search-details-right-author">
        <div
          class="search-details-right-author-content"
          @click="onLecturerDetails"
        >
          <div>
            <img src="@/assets/lijie.jpg" alt="" />
            <h3 style="margin-left: 10px">知了教育</h3>
          </div>
          <a-button type="primary" size="small">关注</a-button>
        </div>
        <p>
          前端工程师，深圳市龙岗区，2019年毕业于广东工业大学计算机科学与技术专业，现就职于知了教育
        </p>
      </div>
      <div>
        <educ-dynamic-hot-list />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.search-details {
  display: flex;

  &-left {
    flex: 3;

    &-image {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 600px;
      background-image: url('@/assets/keceng.png');

      &-button {
        display: flex;
        align-items: center;
        padding: 25px 30px;
        font-size: 20px;
        background-color: $educ-color-white;
        border-radius: 100px;
      }
    }

    .search-details-left-brief {
      min-height: 31.25rem;
      padding: 1.25rem;
      margin: 1.25rem 0;
      background-color: #fff;
      border-radius: 0.3125rem;

      h3 {
        margin: 1.875rem 0;
        font-size: 1.125rem;
        color: #333;
      }

      p {
        font-size: 0.75rem;
        line-height: 1.5;
        color: #666;

        span {
          padding: 0 0.3125rem;
          font-weight: bold;
          color: $educ-color-primary;
        }
      }
    }
  }

  &-right {
    width: 32%;
    margin-left: 1.25rem;
    cursor: pointer;

    &-author {
      padding: 0.625rem 1.25rem;
      margin-bottom: 1.25rem;
      background-color: #fff;

      &-content {
        display: flex;
        align-items: center;
        justify-content: space-between;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        img {
          width: 3.125rem;
          height: 3.125rem;
          border-radius: 50%;
        }
      }

      p {
        padding-top: 1.25rem;
        font-size: 0.875rem;
        color: #666;
      }
    }
  }
}
</style>
